<template>
	<n-layout-content
		class="app-layout-content bg-bg-2"
		position="absolute"
		ref="layoutContent"
		:native-scrollbar="false"
		style="top: 60px; bottom: 0; padding: 0">
		<div class="flex-auto pt-8 pb-20 px-12">
			<div id="app_content" class="max-w-[1390px] mx-auto">
				<router-view />
			</div>
		</div>
		<app-footer class="app-footer" />
	</n-layout-content>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { NLayoutContent } from 'naive-ui'
import AppFooter from '@/components/app/app-footer/index.vue'
import { bus } from '@/utils'

const route = useRoute()
const layoutContent: any = ref(null)

watch(route, () => {
	if (route.name === 'CasinoDetail' || route.name === 'SlotsDetail') {
		handleScrollTop(0)
	}
})
onMounted(() => {
	bus.$on('SCROLLTOP', (val: any) => {
		handleScrollTop(val?.y)
	})
})

const handleScrollTop = (val: any) => {
	layoutContent.value?.scrollTo(0, val || 0)
}
</script>
<style lang="scss" scoped>
#app_content {
	&[games='true'] {
		.app-footer {
			width: 100%;
			max-width: 1296px;
			margin: 0 auto;
		}
	}
}
.app-layout-content {
	:deep(.n-scrollbar-content) {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
}
</style>
